<template>
    <div>
        <cus-modal
            ref="modal"
            :title="type == 0 ? `${ days[nums.indexOf(form.key2)] } ( ${ form.mealTimeName } ) : 添加菜肴` : '替换菜肴'"
            :width="1150"
            :closable="false"
            @on-visible-change="onVisibleChange"
        >
            <div class="noticeBox">
                <Spin size="large" fix v-if="form.loading"> </Spin>
                <div style="display:flex">
                    <Input v-model="form.name" style="width: 200px" placeholder="请填写菜品名称" class="mr_24" clearable></Input>
                    <cusButton class="mr_10" type="primary" @onClick="selectailocalfoodBydishApi">查询</cusButton>
                </div>
                <div style="margin-top:20px">
                    <Tabs type="card" @on-click="clickTbas" v-model="form.dishType">
                        <TabPane v-for="(item, index) in tabs" :key="index" :label="item.dishCategory" :name="item.dishCategory">
                            <div class="dishesBox">
                                <div class="dishesItem" v-for="(item, index) in data" :key="index" @click="chooseItem(item)">{{ item.dishName }}</div>
                            </div>
                        </TabPane>
                    </Tabs>
                </div>
                <Divider orientation="left">已选菜肴</Divider>
                <!-- <div v-html="descr"></div> -->
                <div class="descr">
                    <div v-for="(value, key) in descr" :key="key">
                        <span>需要{{ key }}菜品<span style="color:blue"> {{ value }} </span>道,</span>
                        <span>已选<span style="color:green"> {{ key | filterNum(selectData) }} </span>道;</span>
                    </div>
                </div>
                <div class="dishesBox">
                    <template v-for="(item, index) in selectData" >
                        <div class="dishesItem"  @click="selectData.splice(index, 1)" v-if="item.dishName" :key="index">{{ item.dishName }}({{ item.dishType }})</div>
                    </template>
                </div>
            </div>
            <div slot="footer">
                <slot name="footer">
                    <div class="modal-footer">
                        <cus-button
                            size="small"
                            class="mr_2"
                            @onClick="onCancel"
                            >取消</cus-button
                        >
                        <cus-button type="primary" size="small" @onClick="onOk" v-if="type == 0">确认</cus-button>
                        <cus-button type="error" size="small" @onClick="onDelete" v-if="type == 1">替换</cus-button>
                    </div>
                </slot>
            </div>
        </cus-modal>
    </div>
</template>

<script>
import { selectailocaldishtype, selectailocalfoodBydish } from "@/api/business/dishesModule";

export default {
    components: {},
    name: "addDishes",
    data() {
        return {
            days: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
            type: 0, // 0 添加菜肴 1 修改菜肴
            form: {
                key: 'breakfast',
                key2: 'one',
                mealTimeName: '早餐',
                name: '',
                loading: false,
                dishType: 0
            },
            tabs: [],
            data: [], // 菜品列表
            selectData: [], // 已选菜肴列表
            mealTimeList: [
                { label: 'breakfast', name: '早餐' },
                { label: 'betwwenMealOne', name: '早~午间餐' },
                { label: 'lunch', name: '午餐' },
                { label: 'betwwenMealTwo', name: '午~晚间餐' },
                { label: 'supper', name: '晚餐' },
                { label: 'midnightMealOne', name: '夜餐1' },
                { label: 'midnightMealTwo', name: '夜餐2' }
            ],
            nums: ['one', 'two', 'three', 'four', 'five', 'six', 'seven'],
            mubanData: []
        };
    },
    mounted() {
       
    },
    // 餐次名称过滤
    filters: {
        filterNum(key, selectData) {
            let a = selectData.filter(item => item.dishType == key && item.dishName);
            return a.length;
        }
    },
    computed: {
        descr() {
            let strItem = {};
            this.mubanData.map(item => {
                if(strItem[item.dishType] == undefined) {
                    strItem[item.dishType] = 1;
                } else {
                    strItem[item.dishType] += 1;
                }
            })
            console.log(strItem)
            return strItem
        }
    },
    methods: {
        onVisibleChange(v) {
            if(!v) {
                this.selectData = [];
                this.form = {
                    key: 'breakfast',
                    key2: 'one',
                    mealTimeName: '早餐',
                    name: '',
                    loading: false,
                    dishType: 0
                }
            }
        },     
        show(type, row, selectData) {
            this.$refs["modal"].show = true;
            if (row) {
                this.type = type;
                this.form.key = this.$cu.deepClone(row.key);
                this.form.key2 = this.$cu.deepClone(row.key2);
                this.form.mealTimeName = this.mealTimeList.filter(item => item.label == row.key)[0].name;
                console.log(selectData)
                this.selectData = this.$cu.deepClone(selectData);
                this.mubanData = this.$cu.deepClone(selectData);
                this.selectailocaldishtypeApi().then(() => {
                    this.selectailocalfoodBydishApi()
                });
            }
        },
        onInit() {

        },
        // 确认发布
        onOk() {
            if(this.selectData.length) {
                console.log('添加菜品1');
                this.$emit('onAdd', this.form, this.selectData);
                this.$refs["modal"].show = false;
            } else {
                this.$Message.warning("请选择您要添加的菜品.")
            }
        },
        // 确认删除
        onDelete() {
            this.$emit('onDelete', this.form);
            this.$refs["modal"].show = false;
        },
        //模态框取消
        onCancel() {
            this.$refs["modal"].show = false;
        },
        // 获取菜品分类列表
        selectailocaldishtypeApi() {
            return new Promise((resolve) => {
                selectailocaldishtype({}).then((res) => {
                    if (res.retCode == 2000) {
                        this.tabs = res.data;
                        this.form.dishType = res.data[0].dishCategory;
                        resolve();
                    }
                });
            });
        },
        // 根据菜品分类获取菜品
        selectailocalfoodBydishApi() {
            this.form.loading = true;
            return new Promise((resolve) => {
                selectailocalfoodBydish({
                    dishType: this.form.dishType,
                    dishName: this.form.name
                }).then((res) => {
                    this.form.loading = false;
                    if (res.retCode == 2000) {
                        this.data = res.data;
                        resolve();
                    }
                });
            });
        },
        // 类型切换
        clickTbas(name) {
            this.selectailocalfoodBydishApi();
        },
        // 选中菜肴
        chooseItem(item){{
            let flag = true;
            this.selectData.forEach(it => {
                if(item.dishCode == it.dishCode) {
                    flag = false
                }
            })
            if(flag) {
                let a = this.selectData.filter((it) => it.dishType == item.dishType && !it.dishName);
                console.log(a)
                // 如果存在空模板,且菜肴类型相同,就将已选数据空模板的注满
                if(a.length) {
                    let flag = true;
                    this.selectData.forEach((it, index) => {
                        if(it.dishType == item.dishType && !it.dishName && flag) {
                            flag = false;
                            this.$set(this.selectData, index, this.$cu.deepClone(item));
                            return
                        }
                    })
                } else {
                    this.selectData.push(item);
                }
            } else this.$Message.warning('该菜品已存在.')
        }}
    },
};
</script>

<style scoped lang="less">
// /deep/.ivu-modal-mask {
//     z-index: 4000!important;
// }
// /deep/.ivu-modal-wrap {
//     z-index: 4000!important;
// }
/*里面的代码可以根据自己需求去进行更改*/
/* 设置滚动条的样式 */
::-webkit-scrollbar {
    width:4px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
    -webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
    border-radius:10px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    border-radius:10px;
    background:rgba(0,0,0,0.1);
    -webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
    background:rgba(255,255,255,0.4);
}
.noticeBox {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 20px;
}
.dishesBox {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: start;
    border: 1px solid #d7dde4;
    padding: 10px;
    height: 200px;
    overflow: hidden;
            overflow-y: auto;
}
.dishesItem {
    margin: 0 16px 16px 0;
    color: #1890ff;
    cursor: pointer;
}
.descr {
    display: flex;
    flex-wrap: wrap;
    div {
        margin-bottom: 16px;
        margin-right: 30px;
    }
}
</style>
